<template>
  <div class="app-container">
    <el-row>
      <el-col :span="18">
        <el-button-group>
          <el-button type="primary" @click="drawer = true">新增</el-button>
          <el-button type="success">高级搜索</el-button>
        </el-button-group>
      </el-col>
      <el-col :span="6">
        <el-input
          class="ipt"
          @keyup.enter.native="searchFn"
          v-model="input"
          prefix-icon="el-icon-search"
          placeholder="请输入内容"
        ></el-input>
      </el-col>
    </el-row>
    <el-table
      :data="questArr"
      @sort-change="sortFun"
      border
      max-height="350px"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="#" type="index" width="60" align="center">
      </el-table-column>
      <el-table-column
        prop="title"
        label="题目"
        width="280"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="type"
        label="分类"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="created"
        sortable
        label="发布日期"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="230">
        <template slot-scope="scope">
          <el-button type="primary" size="small">详情</el-button>
          <el-button type="danger" size="small">删除</el-button>
          <el-button type="warning" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentSize"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->
    <el-pagination background layout="prev, pager, next" :total="total">
    </el-pagination>
    <!-- 弹出层 -->
    <el-drawer
      class="gd"
      size="80%"
      title="我是外面的 Drawer"
      :visible.sync="drawer"
      :with-header="false"
    >
      <span>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="type">
            <el-select v-model="form.cid" placeholder="请选择类别">
              <el-option
                v-for="(item, index) in classify"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选项">
            <el-row
              style="margin-top: 10px"
              v-for="(item, index) in option"
              :key="index"
            >
              <el-col :span="2">
                <el-checkbox
                  v-model="item.checked"
                  :disabled="flag"
                ></el-checkbox>
                {{ item.index }}
              </el-col>
              <el-col :span="17">
                <el-input
                  type="textarea"
                  class="one-content"
                  v-model="item.value"
                  :disabled="flag"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-button
                  type="success"
                  icon="el-icon-plus"
                  circle
                  :disabled="flag"
                  @click="addOption(index)"
                ></el-button>
                <el-button
                  type="warning"
                  icon="el-icon-minus"
                  circle
                  :disabled="flag"
                ></el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="答案">答案</el-form-item>
          <el-form-item label="答案提示">
            <el-input v-model="form.tips"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </span>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      input: "",
      form: {},
      drawer: false,
      flag: false,
      option: [
        { index: "A", value: "", checked: false },
        { index: "B", value: "", checked: false },
        { index: "C", value: "", checked: false },
        { index: "D", value: "", checked: false },
      ],
    };
  },
  computed: {
    ...mapState("exam", ["questArr", "total", "currentSize", "pageSize"]),
    ...mapState("msbd", ["classify"]),
  },
  methods: {
    ...mapMutations("exam", ["getcurrentSize", "getsearch", "getcurrentSize"]),
    ...mapActions("exam", ["getData"]),
    ...mapActions("msbd", ["getClassify"]),
    sortFun(row) {
      this.sortData(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    delDataMan(id) {
      this.delData(id);
    },
    async searchFn() {
      await this.getsearch(this.input);
      this.getData();
    },
    addFun() {
      this.drawer = true;
    },
  },
  mounted() {
    this.getData();
    this.getClassify();
  },
};
</script>

<style scoped>
.btn {
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  color: white;
  border-radius: 35px;
  border: 0;
  margin: 0 0 0 20px;
  background-color: chartreuse;
  font-size: 30px;
}

.drawer-wp {
  height: 70%;
  overflow: hidden;
  overflow-y: auto;
}

.btn2 {
  margin: 0 0 0 10px;
  background-color: red;
}

.gd >>> .el-drawer.rtl {
  overflow: hidden;
  overflow-y: auto;
}

.el-drawer__header > :first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  outline: none;
}

.el-form-item {
  margin-left: 50px;
}
</style>